<template>
	<view class="page-fun">
		<view class="address">
			<image src="/static/home/local.png" mode=""></image>
			{{adre || '未知'}}
		</view>
		<view class="iconlist">
			<view class="" @click="camera">
				<image src="/static/home/camera.png" mode=""></image>
			</view>
			<view class="" @click="qrclick">
				<image src="/static/home/qr.png" mode=""></image>
			</view>
			<view class="" @click="qrsclick">
				<image src="/static/home/qr-s.png" mode=""></image>
			</view>
		</view>
		<view class="image-box" v-if="show">
			<image :src="img" mode="widthFix"></image>
			<view class="circle" @click="show = false">
				<u-icon name="close-circle" color="#ffffff" size="28"></u-icon>
			</view>
		</view>
		<u-overlay :show="show" @click="show = false"></u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				adre: '',
				show: false,
				img: ''
			}
		},
		created() {
			this.adre = uni.getStorageSync('address')
		},
		methods: {
			qrclick() {
				const params = {
					map: 'applet_currency_ac_share_cover'
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						console.log(res)
						this.img = res.data.data
						this.show = true
					} else {

					}
				})
			},
			camera() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['sourceType'], //拍照选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						uni.showToast({
							title: '照片已保存至您的手机',
							icon: 'none'
						})
					}
				});
			},
			qrsclick() {
				let app = this
				uni.scanCode({
					success: function(res) {
						uni.showToast({
							title: '扫码成功！',
							icon: 'none'
						})
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-fun {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.iconlist {
			display: flex;
			justify-content: right;
			align-items: center;
			padding-right: 20rpx;
			image {
				width: 50rpx;
				height: 50rpx;
				margin-left: 30rpx;
			}
		}

		.address {
			display: flex;
			align-items: center;
			color: #008bf5;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-left: 20rpx;
				margin-right: 10rpx;
			}
		}

		.image-box {
			width: 75%;
			position: fixed;
			left: 0;
			right: 0;
			margin: auto;
			top: 20%;
			z-index: 99999;
			text-align: center;
			transition: all 1s;

			image {
				width: 100%;
			}

			.circle {
				width: 20px;
				height: 20px;
				position: absolute;
				right: 0;
				top: -20rpx;
			}
		}
	}
</style>
